<template>
  <div>
    <div class="bg">
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <h1>邀请好友</h1>
        <span @click="$router.push('/invitarecords')">邀请记录</span>
      </div>
    </div>
    <van-swipe class="swiper-container" indicator-color="white">
      <van-swipe-item v-for="(item, index) in inviteList" :key="index">
        <div class="item-bg" :style="'background-image:url(' + item.files + ')'">
          <div class="qrcode-wrap">
            <div class="code">{{ user_info.invitationCode }}</div>
            <div ref="qrCodeUrl" class="CodeUrl"></div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import { defineComponent, ref, onMounted, nextTick, computed, reactive, $mui } from 'vue'
import QrcodeVue from 'qrcode.vue'
import html2canvas from 'html2canvas'
import { useStore } from "vuex";
// import { Swiper } from 'swiper'
// import "swiper/swiper.less";
import { list } from "@/api/customerUserInvitation";
import QRCode from 'qrcodejs2'
export default defineComponent({
  // components: {
  //   Swiper
  // },
  setup() {
    const store = useStore();
    const user_info = computed(() => {
      return store.getters.user_info
    })

    const imgUrl = reactive({
      img: '',
    })
    const qrCodeUrl = ref(null);
    const inviteList = ref([])
    const onload = async () => {
      await store.dispatch('user/getUserAll')

    }
    onMounted(() => {
      onload()
      console.log(store.getters.user_info)
      list().then(res => {
        inviteList.value = res.data.data
        nextTick(() => {
          for (let index = 0; index < inviteList.value.length; index++) {
            new QRCode(qrCodeUrl.value[index], {
              text: window.location.origin + '/#/register?referrer=' + user_info.value.invitationCode,
              colorDark: '#000000',
              colorLight: '#ffffff',

              correctLevel: QRCode.CorrectLevel.H,
            })
          }
          //https://www.huozuan.co/#/register?referrer=
        })
        // new Swiper('.swiper-container', {
        //   centeredSlides: true,
        //   slidesPerView: "auto",
        // });
        // nextTick(() => {
        //   for (let index = 0; index < inviteList.value.length; index++) {
        //     new QRCode(qrCodeUrl.value[index], {
        //       text: 'https://test.huoyi.me/#/register?referrer=' + user_info.value.invitationCode,
        //       colorDark: '#000000',
        //       colorLight: '#ffffff',
        //       width: 105,
        //       height: 105,
        //       correctLevel: QRCode.CorrectLevel.H,
        //     })
        //   }
        //   //https://www.huozuan.co/#/register?referrer=
        // })
      })
    })

    const draw = (val) => {
      var box = document.getElementById('box0')
      console.log(box)
      if (box) {
        // html2canvas(box).then(function (canvas) {
        //   imgUrl.img = canvas.toDataURL()//将canvas转为base64图片
        //   console.log(imgUrl.img)
        // });
        html2canvas(box, {
          allowTaint: true,  //开启跨域
          useCORS: true,
          scrollY: 0,
          scrollX: 0,
          allowTaint: false,
          dpi: 300,  //解决生产图片模糊
          backgroundColor: "#fff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
        }).then(canvas => {
          imgUrl.img = canvas.toDataURL()//将canvas转为base64图片
        })
      }
    }
    const downImg = () => { // 下载图片
      // console.log($mui)
      // this.$mui.alert("欢迎使用Hello MUI");
      let a = document.createElement('a')
      a.setAttribute('download', 'poster-' + new Date().getTime())
      a.href = imgUrl.img
      a.click()
    }
    return {
      inviteList,
      qrCodeUrl,
      user_info,
      imgUrl,
      draw,
      downImg,
    }
  }
})
</script>
<style scoped>
.CodeUrl>>>canvas {
  width: 100% !important;
  height: 100% !important;
}

.CodeUrl>>>img {
  width: 100% !important;
  height: 100% !important;
}
</style>
<style lang="less" scoped>
.fiex {
  position: absolute;
  top: -900%;
  z-index: -1;
}

.item-bg {
  // background-image: url('../../assets/image/invite.png');
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
  }

  .qrcode-wrap {
    position: absolute;
    background: white;
    padding: 10px;
    border-radius: 8px;
    width: 220px;
    height: 260px;
    bottom: 5%;
    right: 35%;
    z-index: 6;

    img {
      width: 100px;
    }

    .code {
      text-align: center;
      margin-bottom: 10px;
    }

    .CodeUrl {
      padding: 10px;
    }
  }
}

.bg {
  background: transparent;
}

.title {
  padding: 20px;
  width: 94%;
  color: #ffffff;
  position: fixed;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;

  h1 {
    margin: 0;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
  }

  span {
    display: inline-block;
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #ffffff;
  }

  .van-icon-arrow-left {
    font-size: 50px;
  }
}
</style>